/**
 * 显示对象选择工具
 */

import { Drawer, List, Button } from "antd";
import Controller from 'Controller';
import IElement from 'components/Three/interface/IElement';
import * as THREE from 'three';
import React from "react";
import server from "server";

interface IDataSource {
    url: string;
}

export interface ISelectElementProps {
    visible: boolean;
    onClose?: () => void;
    onSelect?: (url: string) => void;
}

export default function SelectElement(props: ISelectElementProps) {

    const { visible, onClose, onSelect } = props;

    const { dataSource } = useConfig();

    return (
        <Drawer title="选择图片" placement="right" onClose={onClose} visible={visible}>
            <List
                bordered
                dataSource={dataSource}
                renderItem={item => {
                    return (
                        <List.Item>
                            <Button type="link" onClick={() => { onSelect && onSelect(item.url) }} >
                                <img src={item.url} height={20} alt="" /> 材质
                            </Button>
                        </List.Item>
                    )
                }}
            />
        </Drawer>
    )
}

function useConfig() {

    const [dataSource, setDataSource] = React.useState<IDataSource[]>([]);

    React.useEffect(() => {
        server.get('/texture/config.json').end().then(e => {
            setDataSource(e.response?.body ?? []);
        })
    }, [])

    return { dataSource }
}